<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="ma-content-block">
    <a-space class="flex">
      <a-button type="primary" @click="visible = true">
        <template #icon><icon-select-all /></template>{{ props.text }}
      </a-button>
      <!-- <a-tag size="large" color="blue" v-if="props.isEcho">已选择 {{ isArray(selecteds) ? selecteds.length : 0 }} 点位</a-tag> -->
      <a-tag size="large" color="red" v-if="props.isEcho">已选择 {{ userList }} -位置</a-tag>
      <!-- <a-input-tag v-model="userList" v-if="props.isEcho" :style="{ width:'320px' }" :placeholder="'请点击前面按钮' + props.text" :max-tag-count="3" disabled/> -->
   
    </a-space>

    <a-modal v-model:visible="visible" width="1000px" draggable :on-before-ok="close" unmountOnClose>
      <template #title>{{ props.text }}</template>

      <ma-crud
        ref="crudRef"
        :options="crud"
        :columns="columns"
        v-model:selected-keys="selecteds"
        @selection-change="selectHandler"
      />
    </a-modal>
  </div>
</template>

<script setup>
  import { onMounted, ref, watch ,reactive} from 'vue'
  import commonApi from '@/api/common'
  import { Message } from '@arco-design/web-vue'
  import { isArray, isEmpty } from 'lodash'
import { number } from 'echarts'

  const props = defineProps({
    modelValue: { type: Array },
    deviceNum: { type: String },
    case_id: { type: String, default: 0 },
    isEcho: { type: Boolean, default: false },
    multiple: { type: Boolean, default: true },
    onlyId: { type: Boolean, default: true },
    text: { type: String, default: '选择起点' }
  })

  const emit = defineEmits(['update:modelValue', 'success'])

  const visible = ref(false)
  const selecteds = ref([])
  const userList = ref([])

  onMounted(() => {
    if (props.isEcho && props.onlyId) selecteds.value = props.modelValue
  })

  watch(
    ()  => props.modelValue,
    val => {
      if (props.isEcho && props.onlyId) selecteds.value = val
    }
  )

  const selectHandler = (rows) => {
    selecteds.value = rows
  }

  const close = async (done) => {
    if (isArray(selecteds.value) && selecteds.value.length > 0) {
      const response = await commonApi.getPositionInfoByIds({ ids: selecteds.value })
      if (! isEmpty(response) && isArray(response.data)) {
        userList.value = response.data.map( item => {
          return `${item.name}`
          //  return `${item.name}(${item.id})`
        })
        if (props.onlyId) {
          emit('update:modelValue', selecteds.value)
        } else {
          emit('update:modelValue', response.data)
        }
        emit('success', true)
        Message.success('选择成功')
      }
    } else {
      emit('update:modelValue', [])
      userList.value = []
    }
    done(true)
  }

  const crud = ref({
    beforeRequest: params => {
        // 指定排序字段为浏览量字段
        params.device_num = props.deviceNum

        params.case_id = props.case_id

    },
    showIndex: false,
    api: commonApi.getPositionList,
    rowSelection: props.multiple ? { type: 'checkbox', showCheckedAll: true } : { type: 'radio' }
  })

  const columns = reactive([
  {
    title: "",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {
    title: "设备编码",
    dataIndex: "device_num",
    formType: "input",
    search: false
  },
  {
    title: "位置名称",
    dataIndex: "name",
    formType: "input",
    search: true
  },
  {
    title: "点位类型",
    dataIndex: "type",
    formType: "select",
    multiple: false,
    dict: {
      data: [
        {
          label: "配送点",
          value: "delivery"
        },
        {
          label: "路线点",
          value: "normal"
        },
        {
          label: "出品点",
          value: "production"
        },
        {
          label: "充电桩",
          value: "charge"
        }
      ],
      translation: true
    }
  },
  {
    title: "坐标点",
    dataIndex: "pose",
    formType: "input",
    addDisplay: false,
    editDisplay: false
  },
  {
    title: "所属点位",
    dataIndex: "point_id",
    formType: "input",
    search: false,
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "所属区域",
    dataIndex: "dept_id",
    formType: "input",
    search: false,
    addDisplay: false,
    editDisplay: false,
    hide: true
  }
])
</script>

<style scoped>
:deep(.arco-tabs-nav-type-capsule .arco-tabs-nav-tab) {
  justify-content: flex-start;
}
</style>